;(function () {
  $.extend({
    // 大图展示
    imageShow:function (imageArr,index) {
      if(!imageArr.length){
        console.error('图片数组不能为空');
        return false
      }
      if(index == undefined)index = 0;

      var selectedImageIndex = index;      // 选中的图片索引

      var imageShow = {
        // 渲染UI
        render:function () {
          var self = this;
          this.image = {}
          this.image.natureWidth = null
          this.image.natureHeight = null
          this.image.setWidth = null
          this.image.setHeight = null
          this.image.width = null
          this.image.height = null
          this.image.percent = null
          this.image.scale = 1
          this.image.range = 0.5
          this.image.scaleIndex = 0

          var maskUi = $('<div class="is-mask"></div>');
          var smallImageUi = function () {
            var html = '';

            html = $('<div class="operation-button-container">'
              + '<a class="is-operation-icon-wrapper is-increase-icon-wrapper">'
              + '<span class="icon-GM-amplification pr-5"></span>'
              + '<span>放大</span>'
              + '</a>'
              + '<a class="is-operation-icon-wrapper is-reduce-icon-wrapper">'
              + '<span class="icon-GM-shrink pr-5"></span>'
              + '<span>缩小</span>'
              + '</a>'
              + '<a class="is-operation-icon-wrapper is-reset-icon-wrapper">'
              + '<span class="icon-uniE94B pr-5"></span>'
              + '<span>1:1</span>'
              + '</a>'
              + '<a class="is-operation-icon-wrapper is-download-icon-wrapper" href="' + imageArr[index] + '">'
              + '<span class="icon-Gm-downloadpictures pr-5"></span>'
              + '<span>下载</span>'
              + '</a>'
              + '</div>')

            return html
          }

          var bigImageUi = function () {

            var html =  $('<div class="is-big-image-container">'
              + '<div class="is-big-image-wrapper">'
              + '<div class="is-big-image-scroll-wrapper dropzone">'
              + '<img class="is-big-image dropItem" src="' + imageArr[index] + '" alt="展示图片">'
              + '</div>'
              + '</div>'
              + '<span class="icon-Gm-close is-close-icon font-16"></span>'
              + '<div class="is-icon-wrapper left" style="display:none">'
              + '<span class="icon-Gm-previous is-icon is-left-icon"></span>'
              + '</div>'
              + '<div class="is-icon-wrapper right" style="display:none">'
              + '<span class="icon-Gm-next is-icon is-right-icon"></span>'
              + '</div>'
              + '</div>')

            return html
          }

          // 渲染出UI
          maskUi.appendTo('body')
          var imageContainer = $('<div class="is-image-show-container"></div>')
            .appendTo('body')
            .prepend(smallImageUi())
            .prepend(bigImageUi())

          // 是否显示左右操作按钮 --- 若只有一张图则不显示左右操作按钮
          if(imageArr.length !== 1){
            var arrowEle = document.querySelectorAll('.is-icon-wrapper')

            for (var i = 0; i < arrowEle.length; i++) {
              arrowEle[i].style.display = 'block'
            }
          }

          $('.is-close-icon').click(function () {
            self.close()
          })
          $('.is-left-icon').click(function () {
            self.leftSwitch()
          })
          $('.is-right-icon').click(function () {
            self.rightSwitch()
          })
          $('.is-increase-icon-wrapper').click(function () {
            self.zoom()
          })
          $('.is-reduce-icon-wrapper').click(function () {
            self.minify()
          })
          $('.is-reset-icon-wrapper').click(function () {
            self.reset()
          })

          self.initImageData()
          self.bindMouseWheelEvent()
          self.initDrag()

        },
        // 关闭
        close:function () {
          $('.is-mask').remove()
          $('.is-image-show-container').remove()
        },
        // 更换图片
        switch:function () {
          $('.is-big-image').attr('src',imageArr[selectedImageIndex])
          $('.is-download-wrapper').attr('href',imageArr[selectedImageIndex])
        },
        // 向右切换图片
        rightSwitch:function () {
          var self = this;
          var len = imageArr.length;
          if(selectedImageIndex === (len - 1)){
            return false
          }

          if(selectedImageIndex !== (len - 1)){
            selectedImageIndex ++
          }
          self.switch()
        },
        // 向左切换图片
        leftSwitch:function () {
          var self = this;
          if(selectedImageIndex === 0){
            return false
          }
          if(selectedImageIndex !== 0){
            selectedImageIndex --
          }
          self.switch()
        },
        // 计算图片宽高比例 设定容器大小
        initImageData:function(){
          var self = this
          var imageContainerHeight = $(window).height() - 150 ;
          var imageContainerWidth = imageContainerHeight
          var setImgWidth,setImgHeight = 0

          document.querySelector('.is-big-image').onload = function(){
              self.image.natureHeight = document.querySelector('.is-big-image').naturalHeight
              self.image.natureWidth = document.querySelector('.is-big-image').naturalWidth
              self.image.percent = self.image.natureWidth / self.image.natureHeight

              // setImgWidth = imgNatureWidth < imageContainerWidth ? imgNatureWidth : imageContainerWidth
              self.image.setWidth = imageContainerWidth
              self.image.setHeight = self.image.setWidth * self.image.natureHeight / self.image.natureWidth
              self.image.width = self.image.setWidth
              self.image.height = self.image.setHeight

              $('.is-big-image-container').css({
                height:imageContainerHeight + 'px',
                width:imageContainerWidth + 'px'
              })
              $('.is-big-image-wrapper').css({
                height:'auto',
                maxHeight:imageContainerHeight + 'px',
                width:imageContainerWidth + 'px'
              })
              $('.is-big-image-scroll-wrapper').css({
                height: self.image.height + 'px',
                width:  self.image.width + 'px'
              })
              $('.is-big-image').css({
                height: self.image.height + 'px',
                width: self.image.width +  'px'
              })
          }

        },
        bindMouseWheelEvent:function(){
          var self = this
          document.addEventListener('mousewheel',function(event){
            const evt = event ? event : window.event
            // 向上滚动小于 0  向下滚动大于0
            if(evt.wheelDelta > 0){
              self.minify()
            }
            if(evt.wheelDelta < 0){
              self.zoom()
            }
          },false)
        },
        setImageLengthAndWidth:function(){
          this.image.scale = 1 + this.image.range * this.image.scaleIndex
          this.image.width =  this.image.scale * this.image.setWidth
          this.image.height = this.image.scale * this.image.setHeight

          $('.is-big-image').css({ height: this.image.height + 'px', width: this.image.width +  'px' })
        },
        zoom:function(){
          if(this.image.scale >= 5) return

          this.image.scaleIndex ++
          this.setImageLengthAndWidth()
        },
        minify:function(){
          if(this.image.scale <= 0.5) return

          this.image.scaleIndex --
          this.setImageLengthAndWidth()
        },
        reset:function(){
          var initX = this.image.setWidth / 2 * (-1),
              initY = this.image.setHeight / 2 * (-1),
              imageEle = document.querySelector('.is-big-image')

          this.image.scale = 1
          this.image.scaleIndex = 0
          this.image.width = this.image.setWidth
          this.image.height = this.image.setHeight

          imageEle.style.width = this.image.setWidth +  'px'
          imageEle.style.height = this.image.setHeight +  'px'
          imageEle.style.webkitTransform = imageEle.style.transform = 'translate(' + initX + 'px, ' + initY + 'px)'
          imageEle.setAttribute('data-x', initX)
          imageEle.setAttribute('data-y', initY)
        },
        initDrag:function(){
          var self = this
          var dragMoveHandle = function(event){
            var target = event.target,
                initX = self.image.width / 2 * (-1),
                initY = self.image.height / 2 * (-1),
                x = (parseFloat(target.getAttribute('data-x')) || initX) + event.dx,
                y = (parseFloat(target.getAttribute('data-y')) || initY) + event.dy;

            target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
            target.setAttribute('data-x', x)
            target.setAttribute('data-y', y)
          }

          var dragItemConfig = {
            inertia: true,
            autoScroll: true,
            onmove:dragMoveHandle
          }

          interact('.dropItem').draggable(dragItemConfig)
        }
      }

      imageShow.render()
    },
    // pdf 预览
    previewPDF:function(src){

      let ua = window.navigator.userAgent;

			if (ua.indexOf('DingTalk') > -1) {
        window.open(window.location.protocol+'//view.xdocin.com/xdoc?ddtab=true&_xdoc=' + src)
				return
			}

      var previewPDF = {
        init:function(){
          if($('.pdf-preview-wrap').length) return false;
          this.render()
        },
        render:function(){
          var self = this;

          var maskUi = $('<div class="is-mask"></div>').appendTo('body');
          var pdfUi = $('<div class="pdf-preview-wrap"><iframe type="application/pdf" width="100%" height="100%"></iframe><div>')

          pdfUi.appendTo('body')
          $('.pdf-preview-wrap').css({
            'position':'fixed',
            'width':'1200px',
            'height':'750px',
            'left':'50%',
            'top':'50%',
            'transform':'translate(-50%,-50%)',
            'z-index':'1000'
          })
          $('.pdf-preview-wrap iframe').attr('src',src + '?view')

          // 关闭销毁pdf阅读器
          $('.is-mask').click(function(){
            self.close()
          })
        },
        close:function(){
          $('.is-mask').remove()
          $('.pdf-preview-wrap').remove()
        }
      }

      previewPDF.init()
    },
    // office预览
    previewOffice:function(src){
      var previewOffice = {
        init:function(){
          if($('.word-preview-wrap').length) return false;
          this.render()
        },
        render:function(){
          var self = this;

          var maskUi = $('<div class="is-mask"></div>').appendTo('body');
          var wordUi = $('<div class="word-preview-wrap"><iframe width="100%" height="100%"></iframe><div>')

          wordUi.appendTo('body')
          $('.word-preview-wrap').css({
            'position':'fixed',
            'width':'1200px',
            'height':'750px',
            'left':'50%',
            'top':'50%',
            'transform':'translate(-50%,-50%)',
            'z-index':'1000'
          })
          $('.word-preview-wrap iframe').attr('src','https://view.officeapps.live.com/op/view.aspx?src='+src)
          // 关闭销毁pdf阅读器
          $('.is-mask').click(function(){
            self.close()
          })
        },
        close:function(){
          $('.is-mask').remove()
          $('.word-preview-wrap').remove()
        }
      }
      previewOffice.init()
    }
  })

  // 滑动条
  $.fn.rangeSlider = function(cfg) {
    this.sliderCfg = {
      min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : 0,
      max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : 100,
      step: cfg && Number(cfg.step) ? cfg.step : 1,
      curValue: cfg && Number(cfg.curValue) ? cfg.curValue : 0,
      callback: cfg && cfg.callback ? cfg.callback : null
    }
    var $input = $(this)
    var min = this.sliderCfg.min
    var max = this.sliderCfg.max
    var step = this.sliderCfg.step
    var curValue = this.sliderCfg.curValue
    var callback = this.sliderCfg.callback

    $input.attr('min', min)
      .attr('max', max)
      .attr('step', step)
      .attr('value',curValue)

    $input.unbind().bind('input', function(e) {
      $input.attr('value', this.value)
      $input.css('background-size', this.value + '% 100%')
      if ($.isFunction(callback)) {
        callback(this)
      }
    })

  }
}())
